<!-- 信息修改 -->
<template>
	<view class="container">
		<view class="editInfo_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" :background-color="transparentColor" status-bar title="信息修改" dark style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 个人信息区域 -->
		<view class="editInfo_contain">
			<view class="editInfo_contain_main">
				<!-- 按钮区域 -->
				<view class="editInfo_contain_main_avatar">
					<navigator url="/pacakgeMy/pages/myInfo/myInfo" class="discount_coupon_containt_editInfo_my">
						取消
					</navigator>
					<navigator url="/pacakgeMy/pages/myInfo/myInfo" class="discount_coupon_containt_editInfo_count">
						确认
					</navigator>
				</view>
				<!-- 文件上传区域 -->
				<view class="editInfo_contain_main_center">
					<view class="editInfo_contain_main_center_avatar">
						<img src="/static/彩色-优惠券.png"/>
					</view>
					<view class="editInfo_contain_main_center_avatar">
						<img src="/static/彩色-优惠券.png"/>
					</view>
					<view class="editInfo_contain_main_center_avatar">
						<img src="/static/彩色-优惠券.png"/>
					</view>
					<view class="editInfo_contain_main_center_avatar">
						<img src="/static/彩色-优惠券.png"/>
					</view>
					<uni-file-picker></uni-file-picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
	font-size: 30rpx
}
/* 顶部导航栏区域开始 */
.editInfo_header {
	height: 300rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* 顶部导航栏区域结束 */

/* 主体信息区域开始 */
.editInfo_contain {
	padding: 0 20rpx;
	position: relative;
	top: -160rpx;
}
.editInfo_contain_main {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 10rpx 30rpx;
}
.editInfo_contain_main_avatar {
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 6rpx solid #F7F7F7;
}
.discount_coupon_containt_editInfo_count {
	color: #0863E5;
}
.editInfo_contain_main_center {
	display: flex;
	flex-wrap: wrap;
	padding-top: 42rpx;
}
.editInfo_contain_main_center_avatar {
	width: 172rpx;
	height: 176rpx;
	margin: 0 22rpx;
	margin-bottom: 42rpx;
	border-radius: 16rpx;
	background-color: #0863E5;
}
.editInfo_contain_main_center_avatar>img {
	width: 170rpx;
	height: 170rpx;
	border-radius: 16rpx;
}
/* .editInfo_contain_main_center_upload {
	width: 170rpx;
	height: 170rpx;
	margin: 0 22rpx;
	margin-bottom: 42rpx;
	border-radius: 16rpx;
	border: 2rpx solid #E3E3E3;
	box-sizing: border-box;
	text-align: center;
} */
.uni-file-picker {
    margin: 0 22rpx;
    margin-bottom: 42rpx;
    border-radius: 16rpx;
}
/* element.style {
    border-width: 6rpx;
    border-style: solid;
    border-color: #eee;
    border-radius: 10rpx;
} */

::v-deep .is-add {
	width: 170rpx;
	height: 170rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-picker__box-content {
	width: 170rpx;
    height: 170rpx;
}
/* 文件上传区域开始 */
.custom-image-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
/* 文件上传区域结束 */
/* 主体信息区域结束 */
</style>
